<!-- views/generalview/components/card-one.vue -->
<template>
  <a-spin style="width: 100%">
    <a-card style="height: 410px">
      <template #cover>
        <div>
          <img v-if="renderData.picUrl && renderData.picUrl.length > 0"
               :style="{ width: '100%', height: '200px' }"
               :src="renderData.picUrl" />
        </div>
      </template>
      <a-descriptions
          style="margin-top: 40px"
          :column="1"
          :label-style="{
          textAlign: 'right',
          paddingRight: '10px',
          color: 'rgb(var(--gray-8))'
        }"
      >
        <a-descriptions-item label="电站名称：">
          {{ renderData.stationName }}
        </a-descriptions-item>
        <a-descriptions-item label="电站地址：">
          {{ renderData.address }}
        </a-descriptions-item>
        <a-descriptions-item label="电站类型：">
          {{ renderData.pvType }}
        </a-descriptions-item>
        <a-descriptions-item label="建站时间：">
          {{ renderData.buildDate }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getStationInfo } from '../../../apis/home-pv'

const renderData = ref<any>({})

const fetchData = async () => {
  const res = await getStationInfo()
  if (res.data.code == 200) {
    renderData.value = res.data.data
  }
}

onMounted(async () => {
  await fetchData()
})
</script>